<template>
  <scroll-view
    @scrolltolower="handleTOLower"
    class="recommend_view"
    v-if="recommends.length > 0"
    scroll-y
  >
    <!-- 推荐开始 -->
    <view class="recommend_wrap">
      <navigator class="recommend_item" 
                  v-for="item in recommends" 
                  :key="item.id"
                  :url="`/pages/album/index?id=${item.target}`"
                  >
        <image mode="widthFix" :src="item.thumb"></image>
      </navigator>
    </view>
    <!-- 推荐结束 -->

    <!-- 月份  开始 -->
    <view class="monthes_wrap">
      <view class="monthes_title">
        <view class="monthes_title_info">
          <view class="monthes_info">
            <text class="h">{{ monthes.DD }} / </text>
            {{ monthes.MM }} 月
          </view>
          <view class="monthes_text">{{ monthes.title }}</view>
        </view>
        <view class="monthes_title_more">更多 ></view>
      </view>

      <view class="monthes_content">
        <view class="monthes_item" v-for="(item,index) in monthes.items" :key="item.id">
          <go-detail :list="monthes.items" :index="index">
            <image
            :src="item.thumb + item.rule.replace('$<Height>', 360)"
            mode="aspectFill"
          ></image>
          </go-detail>
          
        </view>
      </view>
    </view>

    <!-- 月份  结束 -->

    <!-- 热门 开始 -->
    <view class="hot_wrap">
      <view class="hot_title">
        <text>热门</text>
      </view>
      <view class="hot_content">
        <view class="hot_item" v-for="(item,index) in hots" :key="item.id">
          <goDetail :list="hots" :index="index">
            <image :src="item.thumb" mode="widthFix"></image>
          </goDetail>
          
        </view>
      </view>
    </view>
    <!-- 热门 结束 -->
  </scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "@/components/goDetail"
export default {
  components:{
    goDetail
  },
  data() {
    return {
      //推荐列表
      recommends: [],

      //月份
      monthes: {},

      //热门
      hots: [],

      //get请求的参数
      params: {
        limit: 30,
        order: "hot",
        skip: 0,
      },
      //更多数据
      hasMore: true,
    };
  },
  mounted() {
    this.getRequest();
    
    uni.setNavigationBarTitle({title:"推荐"})
  
  },
  methods: {
    // 发送推荐页数据请求

    getRequest() {
      

      this.request({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
        data: this.params,
      }).then((result) => {
        //判断是否还能请求到数据
        if(result.res.vertical.length === 0){
          this.hasMore= false;
          uni.showToast({
        title: "没有数据啦",
        icon: "none",
      });
          return;
        }

        //只有第一次请求执行以下代码
        if (this.recommends.length === 0) {
          //推荐栏模块
          /* console.log(result); */

          this.recommends = result.res.homepage[1].items;
          console.log(this.recommends)

          //月份模块
          // console.log(result.res.homepage[2])
          this.monthes = result.res.homepage[2];
          this.monthes.MM = moment(this.monthes.stime).format("MM");
          this.monthes.DD = moment(this.monthes.stime).format("DD");
          // console.log(this.monthes)
        }

        //热门模块
        this.hots = [...this.hots, ...result.res.vertical];
        /* console.log(this.hots); */
      });
    },

    //滚动条触底事件
    handleTOLower() {
      console.log("哈哈哈触底了");
      /* 
      1、修改参数skip+=limit
      2、发送网络请求
      3、hots叠加收到的数据hots = [...hots, ...result.res.vertical]
      
      
      */
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getRequest();
      } else {
        uni.showToast({
          title:"我是有底线的",
          icon:"none"
        })
      }
      
    },
  },
};
</script>

<style lang="scss" scoped>
.recommend_view {
  height: calc(100vh - 36px);
}
.recommend_wrap {
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    border: 3px solid white;
  }
}
.monthes_wrap {
  .monthes_title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    font-weight: 600;
    .monthes_title_info {
      display: flex;
      .monthes_info {
        color: $color;
        font-size: 30rpx;

        text {
          font-size: 36rpx;
        }
      }

      .monthes_text {
        font-size: 34rpx;
        margin-left: 30rpx;
        color: #666;
      }
    }

    .monthes_title_more {
      font-size: 30rpx;
      color: $color;
    }
  }

  .monthes_content {
    display: flex;
    flex-wrap: wrap;
    .monthes_item {
      width: 33.33%;
      border: 3rpx solid #ffffff;
    }
  }
}
.hot_wrap {
  .hot_title {
    padding-left: 20rpx;
    text {
      border-left: 20rpx solid $color;
      font-size: 36rpx;
      font-weight: 600;
      padding-left: 20rpx;
    }
  }

  .hot_content {
    display: flex;
    flex-wrap: wrap;
    .hot_item {
      width: 33.33%;
      border: 5rpx solid #ffffff;
      iamge {
      }
    }
  }
}
</style>
